<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历</title>
</head>
<body>
    <input type="button" id="btn" value="遍历列表项">
    <ul>
        <li>传智播客</li>
        <li>黑马程序员</li>
        <li>传智专修学院</li>
    </ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //方式一：传统方式
   /* $("#btn").click(function () {
        let lis=$("li");
        for(let i = 0; i< lis.length;i++){
            alert(i+":"+lis[i].innerHTML);
        }
    })*/
    //方式二：对象.each()方法
   /* $("#btn").click(function () {
        let $li=$("li");
        $li.each(function (index,e) {
            alert(index+":"+e.innerText)
        })
    })*/
    //方式三：$.each()方法
    /*$("#btn").click(function () {
        let $li = $("li");
        $.each($li,function (index,e) {
            alert(index+":"+e.innerHTML)
        })
    })*/
    //方式四：for of 语句遍历
    $("#btn").click(function () {
        let $li = $("li");
       for(ele of $li){
           alert(ele.innerHTML)
       }
    })
</script>
</html>